<template>
  <article class="page">
    <headerbar
      >{{title}}
      <span v-if="false" @click="" class="head-btn" slot="btn">编辑</span>
    </headerbar>

    <div class="d-scroll list-news-img list-block" style="">
      <fetchData
        class="people-list"
        :loading="isLoading"
        :data="swipeData"
      ></fetchData>
      <cube-scroll ref="scroll" :options="options" @pulling-up="onPullingUp" @pulling-down="onPullingDown">
        <cube-swipe>
          <transition-group name="swipe" tag="div">
            <div class="" v-for="(data, index) in swipeData" :key="data.id">
              <cube-swipe-item ref="swipeItem" :index="index">
                <div class="item" @click="goDetail(data)">
                  <div class="img" v-if="false">
                    <img src="../../../../static/images/user_bg.jpg" alt="" />
                  </div>
                  <div class="cont">
                    <h2 class="title"><div class="hower">{{data.title}}</div></h2>
                    <div class="tip">
                      <span>{{ getTime(data.createTime) }}</span>
                      <span
                        v-if="false"
                        class="btn"
                        @click.stop="deleteDialog(data)"
                        >删除</span
                      >
                    </div>
                  </div>
                </div>
              </cube-swipe-item>
            </div>
          </transition-group>
        </cube-swipe>
        <!-- <div
          class="text-center no-data"
          :loading="isLoading"
          v-if="!isLoading && swipeData.length === 0"
        >
          <img src="../../../../static/images/no_data.png" alt="" />
          <p>暂无数据</p>
        </div> -->
        <!-- W noData -->
        <noData v-if="!isLoading && swipeData.length === 0"></noData>
        <onBottom v-else-if="onBottom"></onBottom>
      </cube-scroll>
    </div>
  </article>
</template>

<script>
import tools from "@/utils/tools";
import api from "@/common/config/api";
import loginService from "@/service/loginService";
import moment from "moment";
import Axios from "axios";
export default {
  name: "browseHistory",
  data() {
    return {
      isLoading: true,
      fn: tools,
      options: {
        pullUpLoad: true,
        scrollbar: false,
        pullDownRefresh: {
          threshold: 90,
          stop: 0,
          txt: ' '
        },
      },
      onBottom: false, // W onBottom
      objectsName: "",
      swipeData: [],
      infinite: true,
      pageIndex: 1,
      newsDetail: {
        newsContent: null,
        files: null,
        upOrDown: null,
        collected: null,
      }, //详情
      title:'浏览历史',
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    goAdd(data) {
      this.$router.push({ path: `/newTermReminderDetail/${data.msgId}` });
    },
    loadData() {
      this.isLoading = true;
      let data = {
        pageNo: this.pageIndex + "",
        pageSize: "20",
      };
      this.fetchService.browseHistoryPage(data).then((res) => {
        if (res.code === 0 && res.data.length < 1) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          this.onBottom = true
          this.options.pullUpLoad = false
          return;
        }
        this.pageIndex++;
        this.isLoading = false;
        this.swipeData = this.swipeData.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    onPullingDown() {
      console.log('onPullingDown')
      this.options.pullUpLoad = true
      this.onBottom = false
      this.swipeData = []
      this.pageIndex = 1
      this.loadData();
    },
    getTime(createTime) {
      return moment(createTime).format("YYYY年MM月DD日");
    },
    deleteItem(item) {
      let ids = [];
      ids.push(item.id);
      let data = {
        ids: ids,
      };
      this.fetchService.browseHistoryDeleteMultiple(data).then((res) => {
        tools.tip(data.message);
        if (res.code === 0) {
          this.pageIndex = 1;
          this.swipeData = [];
          this.loadData();
        }
      });
    },
    deleteDialog(item) {
      let me = this;
      this.$createDialog({
        type: "confirm",
        // icon: "cubeic-alert",
        title: "温馨提示",
        content: "确定删除该条足迹？",
        confirmBtn: {
          text: "确定",
          active: true,
          disabled: false,
          href: "javascript:;",
        },
        cancelBtn: {
          text: "取消",
          active: false,
          disabled: false,
          href: "javascript:;",
        },
        onConfirm: () => {
          me.deleteItem(item);
        },
        onCancel: () => {},
      }).show();
    },
    goDetail(item) {
      this.$store.state.tempListData = this;
      this.$store.state.newsDetail = item;
      if (item.newsType == 0) { // 新闻类型(0图文;1长视频;2音频;3短视频)
        this.$router.push({name: 'redCloudNewsDetail', params: {id: item.contentId, channelName:this.title}})
      }else if (item.newsType == 1) {
        this.$store.state.isVideo = true
        this.$store.state.videoDetail = item
        this.$store.state.newsDetail = item
        // 缓存专辑数据
        // this.$store.state.zhuanjiList = this.list
        // 带上专辑标识，详情页进行连续播放
        this.$router.push({name: 'videoDetail', query: {id: item.contentId}})
      }else if (item.newsType == 2 ) {
        this.$store.state.isVideo = false
        this.$store.state.videoDetail = item
        this.$store.state.newsDetail = item
        this.$router.push({name: 'videoDetail', query: {id: item.contentId}})
      }else if (item.newsType == 3 ) {
        this.playVideo(item);
      }
      /* this.$router.push({
        name: "browseHistoryDetail",
        params: { id: item.contentId },
      }); */
    },
    playVideo(item, index) {
      // this.$store.state.newsDetail = item;
      this.tools.showLoading();
      var me = this;
      return Axios.all([
        me.contentDetailNew(item),
        me.newsFiles(item),
        me.contentGetSfdz(item),
        me.contentGetSfsc(item),
      ])
        .then(
          Axios.spread((res1, res2, res3, res4) => {
            console.log('item1',item)
            me.tools.hideLoading();
            me.newsDetail.newsContent = res1;
            item = res1
            me.newsDetail.files = res2;
            me.newsDetail.upOrDown = res3;
            me.newsDetail.collected = res4;
            // item.id = item.contentId;
            item.detail = me.newsDetail;
            me.$store.state.newsDetail = item;
            me.$createVideoPlayerComponent({
              $props: {
                videoUrl: me.tools.getImgUrl(res2[0].fileId),
              },
            }).show();
            return false;
          })
        )
        .catch((err) => {
          console.log(err.response);
        });
    },
    //获取内容详情(新)
    contentDetailNew(v) {
      let me = this;
      return me.fetchService.contentDetailNew(v.contentId).then((res) => {
        if (res.code === 0) {
          console.log('res.data.newsContent',res.data.newsContent);
          return res.data.newsContent;
        }
      });
    },
    //获取新闻附件
    newsFiles(v) {
      let me = this;
      return me.fetchService.newsFiles(v.contentId).then((res) => {
        if (res.code === 0) {
          return res.data;
        }
      });
    },
    //查询当前用户是否点赞指定的新闻
    contentGetSfdz(v) {
      let me = this;
      return me.fetchService.contentGetSfdz(v.contentId).then((res) => {
        if (res.code === 0) {
          return res.data;
        }
      });
    },
    //查询当前用户是否收藏指定的新闻
    contentGetSfsc(v) {
      let me = this;
      return me.fetchService.contentGetSfsc(v.contentId).then((res) => {
        if (res.code === 0) {
          return res.data;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
</style>
